<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     .demo{
        width: 200px;
        height: 300px;
        margin: 50px auto 0;
        position: relative;
        overflow: hidden;
        }
        .demo1{
          height: 100px;
          width: 180px;
          padding: 10px;
          background: black;
          color: white;
          position: absolute;
          top:300px;
          left: 0px;
          opacity: 0.4;
          transition: all 1s ease;
        }
        .demo:hover .demo1{
           top:180px;
        }
        .demo2{
            width: 400px;
            height: 400px;
            border: 1px dotted pink;
            display:block;
            margin: 50px auto 0;
            animation: roating 1s  ease 0s  infinite;
        }
        @keyframes roating{
            form{
               transform: rotate(0deg);
            }
            to{
              transform: rotate(360deg);
            }
        }
        .demo3{
            width: 300px;
            height: 160px;
            border: 1px solid black;
            margin: 50px auto 0;
        }
        .demo3 div{
          height:100px;
          width: 40px;
          margin: 10px;
          float: left;
          border-radius: 20px;

          animation:scale 1s linear infinite;
        }
        @keyframes scale{
            from{
                transform: scale(1,1);
            }
            to{
                transform: scale(1,0.7);
            }
        }
        .demo3 p{
            text-align: center;
        }
        .demo3 div:nth-child(1){
            background-color: blue;
            animation-delay: 100ms;
        }
        .demo3 div:nth-child(2){
            background-color: brown;
            animation-delay: 200ms;
        }
        .demo3 div:nth-child(3){
            background-color: burlywood;
            animation-delay: 300ms;
        }
        .demo3 div:nth-child(4){
            background-color: coral;
            animation-delay: 400ms;
        }
        .demo3 div:nth-child(5){
            background-color: cyan;
            animation-delay: 500ms;
        }
        .demo4{
            width: 120px;
            height: 180px;
            border: 1px solid black;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
        }
        .demo4 img{
            position: absolute;
            top:0px;
            left: 0px;
            animation: walking 500ms   steps(8) infinite ;
        }
        @keyframes walking{
           from{
     left: 0;
    } 
    to{
        left: -960px;
    }
        }
        .demo5{
            width: 500px;
            height: 271px;
            border: 1px solid black;
            margin: 50px auto 0;
            position: relative;
        }
        .demo5 img{
            display:block;
            position: absolute;
            left: 100px;
            transition: all 1s ease 0s
          
        }
        .demo5 img .demo5 p{
            transition: all 1s ease 0s
           
        }

        .demo5 p{
            transform-style: preserve-3d;  
            transform:rotateY(180deg);
            z-index: 1;
            backface-visibility: hidden;  
            position: absolute;
            top: 110px;
            left: 200px;
        }
        .demo5:hover img{
            transform:rotateY(180deg);
        }
        .demo5:hover p{
            transform:rotateY(0deg);
        }
</style>
<body>
   
        <div class="demo">
            <img src="./imgs/banner01.jpg" alt="图片">
            <div class="demo1">
            <h3>文字标题</h3>
            <p>图片说明文字</p>
            </div>
        </div>
        <hr>
                <img src="./imgs/fengche.png" alt="风车" class="demo2">
                <hr>
                <div class="demo3">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <p>loading...</p>
                </div>
                <hr>
                <div  class="demo4">
                <img src="./imgs/walking.png" alt="图片" >
                </div>
                <hr>
                <div class="demo5">
                    <img src="./imgs/location_bg.jpg">
                    <p>我是图片</p>
                </div>
</body>
</html>